<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/vue.global.js"></script>
    <title>1-v-if</title>
  </head>

  <body>
    <div id="vif-app">
      <!-- v-if 指令用于条件性地渲染一块内容。
        这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 -->
      <div v-if="Math.random() > 0.5">Now you see me</div>
      <!-- v-else-if，顾名思义，充当 v-if 的“else-if 块”，并且可以连续使用： -->
      <div v-else-if="Math.random() = 0.5">Awasome</div>
      <!-- 可以使用 v-else 指令来表示 v-if 的“else 块”： -->
      <div v-else>Now you don't</div>
    </div>
    <script>
      Vue.createApp({}).mount('#vif-app');
    </script>
  </body>
</html>
